<template>
  <view class="wrap">
     <top-tab tabTitle="我的消息" @backClick="backClick" backColor="#5B2177"></top-tab>
		 <view class="tab-mess">
			 <view class="mess" @click="tabStatus = true" :class="tabStatus ? 'tab-active' : ''">消息</view>
			 <view class="system" @click="tabStatus = false" :class="tabStatus ? '' : 'tab-active'">系统通知</view>
		 </view>
		 <!-- 列表 -->
		 <view class="main">
			 <view class="mess-list" v-for="(item,index) in messList" :key="item.id">
				<view class="img-box">
					<uni-badge type="error" text="1" absolute="leftTop" :is-dot="true">
						<image :src="item.url" mode="aspectFill" class="img"></image>
					</uni-badge>
					
				</view>
				<view class="item-name-time-text">
					<view class="name-time-box">
						<view class="item-naem">{{item.name}}</view>
						<view class="item-time">{{item.time}}</view>
					</view>
					<view class="mess-text">{{item.text}}</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
  export default {
		components: { topTab },
    data() {
      return {
				tabStatus: true,
				messList: [
					{ id: 1, name: '七月的风', time: '8月28日', text: '在干嘛', url: '/static/home/Hotpush_d.jpg' },
					{ id: 2, name: '吃开心果的虫子', time: '8月20日', text: '我喜欢公寓', url: '/static/home/Hotpush_b.jpg' },
					{ id: 3, name: '河边的小红花', time: '8月11日', text: '当我去看的时候惊呆了', url: '/static/home/Hotpush_c.jpg' },
					{ id: 4, name: '0.1秒的幸福', time: '7月18日', text: '— 好的，明天我过去看一下。', url: '/static/home/Hotpush_d.jpg' },
					{ id: 5, name: 'A乐有家房产', time: '7月10日', text: '出租单间有家电空调', url: '/static/home/portrait_a.jpg' },
					{ id: 6, name: '秋天的风', time: '6月28日', text: '我们一路上兴致勃勃地参观', url: '/static/home/portrait_b.jpg' },
					{ id: 7, name: '紫色的忧伤', time: '6月19日', text: '人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动', url: '/static/home/portrait_c.jpg' },
					{ id: 8, name: '连不到服务器', time: '5月10日', text: '因为有梦，所以勇敢出发，选择出发，便只顾风雨兼程', url: '/static/home/Hotpush_a.jpg' },
				]
			}
    },
  onShow() {},
  methods: {
		// messClick() {
		// 	this.tabStatus = !this.tabStatus
		// },
		//返回上一页
		backClick() {
			uni.switchTab({
				url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.tab-mess{
		display: flex;
		align-items: center;
		box-shadow: 0px 4rpx 8rpx 0px rgba(2, 4, 51, 0.08);
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #95A0B6;
		.tab-active{
			color: #B83DF1;
			border-bottom: 2px solid #B742EE;
		}
		.mess{
			flex: 5;
			text-align: center;
				padding: 60rpx 0 33rpx 0;
		}
		.system{
			flex:5;
			text-align: center;
				padding: 60rpx 0 33rpx 0;
		}
	}
	.main{
		padding-top: 16rpx;
		.mess-list{
			padding: 32rpx 0 0 46rpx;
			display:flex;
			
			.img-box{
				width: 64rpx;
				height: 64rpx;
				margin-right: 33rpx;
				.img{
				width: 64rpx;
				height: 64rpx;
					border-radius: 50%;
				}
			}
			.item-name-time-text{
				width: 606rpx;
				padding-bottom: 35rpx;
				border-bottom: 1px solid #F0F0F0;
				.name-time-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 54rpx;
					.item-naem{
						width: 70%;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #020433;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
					}
					.item-time{
						font-size: 26rpx;
						font-family: PingFang SC;
						color: #95A0B6;
					}
				}
				.mess-text{
					width: 526rpx;
					margin-top: 20rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					color: #95A0B6;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
	}
</style>
